<template>
  <b-container class="avaterCard" fluid>
    <!-- 上半部分 -->
    <div
      :class="$store.state.avaterCard.visible ? null : 'collapsed'"
      :aria-expanded="$store.state.avaterCard.visible ? 'true' : 'false'"
      aria-controls="avaterMessageCard"
      v-b-toggle.avaterMessageCard
      class="avaterTop"
    >
      <b-row>
        <pre class="mt-2 mb-0" />
      </b-row>
      <b-row>
        <b-col>
          <b-img
            style="max-width: 80px"
            rounded="circle"
            thumbnail
            center
            :src="
              user == ''
                ? 'https://s1.imagehub.cc/images/2022/06/14/default.th.jpg'
                : user.avaterUrl
            "
          />
        </b-col>
      </b-row>
      <pre class="mt-4 mb-0" />
      <pre class="mt-4 mb-0" />
      <!-- 设置个签 -->
      <b-row style="text-align: center">
        <div>
          <p style="background-color: rgba(244, 240, 240, 0.4); padding: 0">
            {{ user.signature }}
          </p>
        </div>
      </b-row>
      <pre class="mt-2 mb-0" />
    </div>
    <!-- 下半部分 -->
    <b-collapse
      visible
      v-model="$store.state.avaterCard.visible"
      id="avaterMessageCard"
    >
      <div class="avaterBot">
        <div class="avaterBot">
          <!-- 只是给他加个空行好看点 -->
          <pre class="mt-3 mb-0" />
          <b-row>
            <b-col>
              <b-link class="avaterCol">动态</b-link>
            </b-col>
            <b-col>
              <b-link class="avaterCol">站龄</b-link>
            </b-col>
            <b-col>
              <b-link
                :class="
                  $store.state.avaterCard.ifCheck ? 'alreadyCheck' : 'avaterCol'
                "
                >{{ $store.state.avaterCard.checkInText }}</b-link
              >
            </b-col>
          </b-row>
          <pre class="mt-3 mb-0" />
        </div>
        <pre class="mt-3 mb-0" />
        <b-row>
          <b-col> {{ user.dynamicNum }} </b-col>
          <b-col> {{ day }}天</b-col>
          <b-col> {{ user.checkDay }}天</b-col>
        </b-row>
        <pre class="mt-3 mb-0" />
      </div>

      <!-- 用户操作部分 -->
      <div class="avaterBot">
        <div class="avaterBot">
          <div>
            <transition leave-active-class="animated bounceOut">
              <b-button
                block
                variant="warning"
                style="width: 100%; margin-top: 1%"
                v-b-modal.checkIn
                v-if="$store.state.avaterCard.checkShow"
              >
                签 到
              </b-button>
            </transition>

            <b-button
              block
              @click="toLogin"
              variant="success"
              v-b-modal.login
              style="width: 100%; margin-top: 1%"
              v-if="!isLogin"
            >
              登 录
            </b-button>

            <b-button
              block
              variant="danger"
              style="width: 100%; margin-top: 1%"
              v-else
              @click="exit"
            >
              退出登录
            </b-button>
          </div>
        </div>
      </div>
    </b-collapse>

    <!-- 放一些无关紧要的东西 -->

    <!-- 签到提示框 -->
    <b-modal
      id="checkIn"
      title="签到成功"
      hide-backdrop
      centered
      hide-header-close
      ok-only
      @hidden="toCheckIn"
      class="qiandaoTips"
    >
      <p class="tipsText">
        你已经签到了<span style="color: red">{{ user.checkDay + 1 }}</span
        >天!超越<span style="color: red">{{
          $store.state.avaterCard.overWhelm
        }}</span
        >的uu,<span style="color: green">经验+100</span>
      </p>
    </b-modal>

    <!-- 最下面有关于modal的一些设定 -->
  </b-container>
</template>

<script>
import axios from "axios";
import moment from "moment";
export default {
  name: "MyAvater",
  data() {
    return {
      //用户信息
      userData: {},
      //头像位置
      avatarSrc: require("@/assets/avater.jpg"),
      //随机二次元图片当背景
      randomPicSrc: "https://www.hlapi.cn/api/ecy1",
      MyMessage: "这里还是打算放个签",
      // //是否显示签到按钮
      // checkShow: true,
      //已移交到vuex
      //是否登录
      isLogin: false,
      //获取的用户id 和 本页用户数据
      id: "",
      user: [],
      avaterUrl: "",
      //站龄计算
      day: 0,
    };
  },
  methods: {
    //执行签到操作
    toCheckIn() {
      //没连接数据库，暂时只在前端操作

      //需要后台确认签到的布尔值，再决定是否移除组件
      this.$store.commit("setCheckCard");
      console.log(this.$store.state.avaterCard.checkShow);
    },
    //获取用户数据
    getUserData() {
      axios
        .get("http://localhost:8081/user/serachUser", {
          params: {
            id: this.id,
          },
        })
        .then((res) => {
          this.user = res.data;
          var times = new Date().getTime();
          this.day = moment(times).diff(moment(this.user.time), "days");
          console.log("获取到的用户数据----->", this.user);
        })
        .catch((err) => {
          console.error(err);
        });
    },
    // console.log("开始请求数据");
    //跳转到登录页面
    toLogin() {
      this.$router.push({
        path: "/login",
        params: {
          id: 1,
          title: "登录",
        },
      });
    },
    //退出登录
    exit() {
      // localStorage.removeItem("userId");
      axios.get("http://localhost:8081/user/loginOut",{
        params:{
          token:localStorage.getItem("token"),
        }
      }).then((res) => {
        if (res.data) {
          this.isLogin = false;
          localStorage.removeItem("token");
          console.log("登出成功");
          location.reload();
        }
      });
    },
    //查询登录状态
    iflogin() {
      axios
        .get("http://localhost:8081/user/iflogin", {
          params: {
            token: localStorage.getItem("token"),
          },
        })
        .then((res) => {
          if (res.data == "") {
            this.isLogin = false;
            localStorage.removeItem("token");
            console.log("没有登录");
          } else {
            console.log("已登录----->", res.data);
            this.isLogin = true;
            this.id = res.data;
            this.getUserData();
          }
        });
    },
  },
  beforeMount() {
    this.iflogin();
  },
  mounted() {},
};
</script>

<style scoped>
.qiandaoTips {
  border-radius: 10px;
  box-shadow: 0 2px 40px rgba(0, 0, 0, 0.868), 0 0 6px rgba(0, 0, 0, 0.913);
}
.avaterCard {
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  padding: 0;
}
.avaterTop {
  border-radius: 4px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  background-image: url("https://www.hlapi.cn/api/ecy1");
  background-position: center;
  background-size: 100%;
}
.avaterBot {
  text-align: center;
  border-bottom: 1px solid rgba(235, 234, 234, 0.783);
  border-top: 1px solid rgba(235, 234, 234, 0.783);
}
.avaterImg {
  border: 2px solid rgba(23, 17, 17, 0.514);
  border-radius: 10px;
  margin: 5%;
}
.avaterCol {
  width: 100%;
  text-decoration: none;
  font-size: 110%;
}
.alreadyCheck {
  width: 100%;
  text-decoration: none;
  font-size: 110%;
  color: rgba(75, 75, 75, 0.863);
}
.tipsText {
  /* color: rgba(26, 153, 222, 0.947); */
  font-size: 16px;
}
</style>
// @ok:点击确定触发的事件 @hidden:关闭 model触发的事件
// ok-title="保存":确定按钮的 text cancel-titile="关闭":关闭按钮的text
// :no-close-on-backdrop="布尔值":点击背景是否关闭model
// hide-footer:隐藏底部“确定、关闭”按钮 hide-header:隐藏头部
// hide-header-close:隐藏右上方 "x"